<template>
  <div class="container">
    <div :class="cpContainerClass">
      <div v-for="page in propPages" :key="page" @click="pageClick(page)">
        <div v-if="page==propCurrent" class="page-number active" :style="propActiveStyle">{{page}}</div>
        <div v-else class="page-number inactive" :style="propInActiveStyle">{{page}}</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
    }
  },
  props: {
    propPages: Number,
    propCurrent: Number,
    propVertical: {
      type: Boolean,
      default: false
    },
    propActiveStyle: {
      type: Object,
      default: null
    },
    propInActiveStyle: {
      type: Object,
      default: null
    }
  },
  computed: {
    cpContainerClass() {
      if (this.propVertical) {
        return 'page-number-container vertical'
      } else {
        return 'page-number-container'
      }
    }
  },
  methods: {
    pageClick(index) {
      this.$emit('page-click', index)
    }
  },
}
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
  }
  .page-number-container {
    display:flex;
    flex-wrap:wrap;
    width:100%
  }
  .vertical {
    flex-direction: column;
  }
  .page-number {
    font-size: 9px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 5px;
  }

  .inactive {
    background-color: #ccc;
  }
  .active {
    background-color: #eee;
  }

</style>
